<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2022-01-18 17:02:28
 * @LastEditors: qingyang
 * @LastEditTime: 2022-05-07 14:40:20
-->

<template>
  <div class="pie-wrap" ref="pieChartRef" v-loading="loading" v-if="!showEmpty"></div>
  <div class="white-mask" v-if="showEmpty"> 暂无数据 </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, computed, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
import { store } from '@/store';
import { useEventListener } from '@/hooks/useEventListener';
import { transformUnitKgToT, fixZero } from '@/utils/index';

export default defineComponent({
  name: 'GFlow',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const loading = ref(true);
    const showEmpty = ref(false);
    const isCollapse = computed(() => {
      return store.state.app.collapsed;
    });
    const showLoading = () => {
      loading.value = true;
    };
    const hideLoading = () => {
      loading.value = false;
    };
    onMounted(() => {
      showEmpty.value = !props.data.length;
      if (props.data.length) {
        nextTick(() => {
          initCharts(props.data.length ? props.data : []);
        });
      } else {
        hideLoading();
      }
    });
    watch(
      () => props.data,
      val => {
        showEmpty.value = !val.length;
        if (val.length) {
          nextTick(() => {
            initCharts(val.length ? val : []);
          });
        } else {
          hideLoading();
        }
      }
    );
    watch(isCollapse, () => {
      setTimeout(() => {
        onResize();
      }, 300);
    });
    const pieChartRef = ref();
    const pieChart = ref();
    const loadChart = (data: any) => {
      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: function (arg: any) {
            return (
              arg.marker +
              arg.name +
              '&nbsp;&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;&nbsp' +
              fixZero(transformUnitKgToT(arg.value, 2))
            );
          }
        },
        series: {
          type: 'sankey',
          layout: 'none',
          left: '24',
          right: '15%',
          emphasis: {
            focus: 'adjacency'
          },
          data: data[0].nodes,
          links: data[0].links,
          layoutIterations: 0,
          lineStyle: {
            color: 'source',
            curveness: 0.2
          },
          label: {
            width: 160,
            overflow: 'break'
          }
        }
      };
      pieChart.value.setOption(option);
    };

    const initCharts = (data: any) => {
      pieChart.value = echarts.init(pieChartRef.value);
      console.log(data[0].links);
      // for (let obj of data[0].links) {
      //   obj.value = transformUnitKgToT(obj.value, 2);
      // }
      data[0].nodes.sort(function (a: any, b: any) {
        var order = ['范围一', '范围二', '范围三'];
        return order.indexOf(a.name) - order.indexOf(b.name);
      });
      loadChart(data);
    };
    const onResize = () => {
      if (pieChart.value) {
        pieChart.value.resize();
      }
    };
    useEventListener({
      el: window,
      name: 'resize',
      listener: onResize
      // wait: 100,
    });
    return {
      pieChartRef,
      loading,
      showLoading,
      hideLoading,
      showEmpty
    };
  }
});
</script>
<style lang="scss" scoped>
.pie-wrap {
  width: 100%;
  height: 100%;
}

.white-mask {
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
